<template>
  <div
    class="app-main-content"
    style="height: 96%">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick">
      <el-tab-pane
        label="电文发送管理"
        name="first"></el-tab-pane>
      <el-tab-pane
        label="电文接收管理"
        name="second"></el-tab-pane>
    </el-tabs>
    <div>
      <div style="display: flex; justify-content: flex-end;">
        <el-button @click="reset">
          重置
        </el-button>
        <el-button
          type="primary"
          v-oauth
          data-oauthUuid="1620439847000"
          @click="showSearchDialog">
          查询
        </el-button>
      </div>
      <div style="margin-top: 16px;">
        <scmsa-table
          ref="table"
          v-loading="loading"
          :column="tablecolumn"
          :data="tableDatas"
          pagination
          :height="tableTopHeight"
          :total="total"
          border
          align="center"
          :current-page="query.page"
          :page-size="query.size"
          :row-key="(row) => row.id"
          @selection-change="selectionRowsChange"
          @size-change="handlePageSizeChange"
          @pagination-current-change="handlePageCurrentChange" />
      </div>
    </div>
    <detail
      ref="detail" />
    <el-dialog
      v-if="showSearchMod"
      v-dialogDrag="showSearchMod"
      :close-on-click-modal="false"
      title="搜索"
      width="60%"
      :visible.sync="showSearchMod">
      <query-form
        ref="qform"
        :is-more-query="true"
        :options="searchOptions"
        @cancel="onCancel"
        @query="onOrgSearch" />
    </el-dialog>
  </div>
</template>

<script>
  import colume from './colume'
  import detail from './detail'
  import { deepClone } from '@/utils/index'
  import Api from '@/api/interfaceManage.js'

  export default {
    name: 'InterfaceManage',
    components: {
      detail
    },
    mixins: [colume],
    data() {
      return {
        showSearchMod: false,
        activeName: 'first',
        loading: false,
        tableDatas: [],
        total: 0,
        query: {
          page: 1,
          size: 10
        },
        selectedTableNode: []
      }
    },
    computed: {
      tableTopHeight() {
        return this.$store.state.settings.tableHeight + 10
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      reset() {
        if (this.queryForm) {
          for (const key in this.queryForm) {
            if (Object.hasOwnProperty.call(this.queryForm, key)) {
              this.queryForm[key] = undefined
            }
          }
        }
        this.onOrgSearch({}, 'search')
      },
      showSearchDialog() {
        if (this.queryForm) {
          for (const key in this.queryForm) {
            if (Object.hasOwnProperty.call(this.queryForm, key)) {
              const element = this.queryForm[key]
              this.searchOptions.some(ii => {
                if (ii.key === key) {
                  ii.defaultVal = element
                  return true
                }
              })
            }
          }
        }
        this.showSearchMod = true
      },
      onCancel() {
        this.showSearchMod = false
      },
      // 查询搜索
      onOrgSearch(queryParms, type) {
        this.searchType = type
        this.queryForm = deepClone(queryParms)
        this.query = {
          page: 1,
          size: this.query.size,
          ...queryParms
        }
        if (queryParms.receiveTime) {
          this.query.receiveTimeStart = new Date(queryParms.receiveTime[0].replace(/-/g, '/'))
          this.query.receiveTimeEnd = new Date(queryParms.receiveTime[1].replace(/-/g, '/'))
          delete this.query.receiveTime
        }
        this.refreshList(true)
      },
      init() {
        this.refreshList(true)
      },
      handleClick() {
        // if (this.queryForm) {
        //   for (const key in this.queryForm) {
        //     if (Object.hasOwnProperty.call(this.queryForm, key)) {
        //       this.queryForm[key] = undefined
        //     }
        //   }
        // }
        // this.refreshList(true)
        this.reset()
      },
      selectionRowsChange(e) {
        this.selectedTableNode = e
      },
      // 每页条数发生改变时返回值
      handlePageSizeChange(v) {
        this.query.size = v
        this.query.page = 1
        this.refreshList()
      },
      // 当前选中页发生改变时返回值
      handlePageCurrentChange(v) {
        this.query.page = v
        this.refreshList()
      },
      refreshList(loading) {
        if (this.searchType === 'search') {
          this.onCancel()
        }
        this.loading = loading
        this.getList()
      },
      getList() {
        if (this.activeName === 'first') {
          Api.findAllSend(this.query).then(data => {
            this.tableDatas = data.data
            this.total = data.total
            this.loading = false
          }, () => {
            this.tableDatas = []
            this.total = 0
            this.loading = false
          })
        } else {
          Api.findAllReceive(this.query).then(data => {
            this.tableDatas = data.data
            this.total = data.total
            this.loading = false
          }, () => {
            this.tableDatas = []
            this.total = 0
            this.loading = false
          })
        }
      },
      reSend(row) {
        if (this.activeName === 'first') { // 重新发送

        } else { // 重新接收

        }
      },
      showDetail(row) {
        this.$refs.detail.show(row)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
